<template>
    <div>
        <div class="title">
            <span>{{$route.params.search}}</span>
        </div>
        <div class="container">
            <div class="container1">
                <div class="box" v-for="k in 7" :key="k">
                    <img :src="require(`../assets/image/image${k}.png`)"/>
                    <span>菜名</span>
                </div>
                <div class="box" v-for="k in 7" :key="k">
                    <img :src="require(`../assets/image/image${k}.png`)"/>
                    <span>菜名</span>
                </div>
                <div class="box" v-for="k in 7" :key="k">
                    <img :src="require(`../assets/image/image${k}.png`)"/>
                    <span>菜名</span>
                </div>
            </div>
            <div class="container2">
                <div class="box">
                    <dl>
                        <dt>小知识</dt>
                        <dd><span>1.</span>芭拉芭拉芭</dd>
                        <dd><span>2.</span>芭拉芭</dd>
                        <dd><span>3.</span>芭拉芭拉芭</dd>
                        <dd><span>4.</span>芭拉芭拉芭撒大大</dd>
                        <dd><span>5.</span>芭拉芭拉芭大大娃娃</dd>
                        <dd><span>6.</span>芭拉芭拉芭速度</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="kuang">
               <div class="ym">
                    <router-link :to="`/search/${$route.params.search}/${id==1?id:id-1}`"><dd :class="`from ${id==1?'active':''}`" >上一页</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/1`"><dd :class="id==1?'active':''">1</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/2`"><dd :class="id==2?'active':''">2</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/3`"><dd :class="id==3?'active':''">3</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/4`"><dd :class="id==4?'active':''">4</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/5`"><dd :class="id==5?'active':''">5</dd></router-link>
                    <router-link :to="`/search/${$route.params.search}/${id==5?id:1+parseInt(id)}`"><dd :class="`next ${id==5?'active':''}`" >下一页</dd></router-link>
                </div>
        </div>
    </div>
</template>
<script>
    import data from "../assets/image/image1.png"
    export default{
        props:["id"],
		data(){
			return{
				data:null,
			}
		},
        methods:{
            getdata(){
                this.data = data
            }
        }
	}
</script>
<style scoped lang="scss">
    a {
    text-decoration: none;
    }
    router-link {
    text-decoration: none;
    }
    .title{
			width: 100%;
			height: 30px;
            padding-left: 300px;
			display: flex;
			margin-bottom: 40px;
			>span{
				text-align: center;
				line-height: 30px;
				font-size: 40px;
				color: #817c74;
			}
	}
    .container1{
        float: left;
        width: 650px;
        height: auto;
        margin-left: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        >.box{
            margin:5px 5px;
            background-color: #fff;
            border: 1px solid rgb(222, 222, 222);
            &:hover{
                border: 1px solid #fa7e3e;
            }
            >img{
                display: block;
                border: 0px;
                width: 200px;
                height: 120px;
            }
            >span{
                display: block;
                margin-left: 5px;
            }
        }
    }
    .container2{
        width: 270px;
        float: left;
        margin-left: 30px;
        border: 1px solid rgb(222, 222, 222);
        >.box{
            >dl{
                margin-left: 20px;
                >dt{
                    color: #817c74;
                }
                >dd{
                    margin: 5px 1px;
                    &:hover{
                        cursor: pointer;
                        color: #fa7e3e;
                    }
                    >span{
                        color: #fa7e3e;
                    }
                }
            }
        }
    }
    .kuang{
		width: 500px;
		height: auto;
		margin-top: 20px;
		margin-left: 300px;
		>.ym{
			width: 570px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			dd{
				&:hover{
					background: white;
					color: #fa7e3e;
					border: 2px solid #ffa97e;
					cursor: pointer;
				}
				width: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
				border: 2px solid #ffa97e;
				background-color: #fa7e3e;
				margin-left: 30px;
				color: white;
				
			}
			.from{
				width: 50px;
			}
			.active{
				background: white;
				color: #fa7e3e;
				border: 2px solid #ffa97e;
				cursor: pointer;
				}
			.next{
				width: 50px;
			}
		}
	}
</style>